import React from 'react'
import classNames from 'classnames'

import { Text, View } from '@tarojs/components'
import styles from './index.module.scss'
import '../iconfont/iconfont.css'
import { addUnit } from '../Image'

export type IconValueType =
  | 'tip-error'
  | 'tip-loading'
  | 'tip-success'
  | 'tip-warning'
  | 'alipay'
  | 'wechat-pay'
  | 'wechat'
  | 'member'
  | 'points'
  | 'cart-outline'
  | 'pin-outline'
  | 'arrow'
  | 'navigation'
  | 'phone'
  | 'arrow-thin'
  | 'scan'
  | 'home'
  | 'close-circle'
  | 'chat'
  | 'poster-save'
  | 'share'
  | 'selected'
  | 'unselected'
  | 'trash-outline'
  | 'edit-outline'
  | 'notification-outline'
  | 'search-outline'
  | 'more'
  | 'order-outline'
  | 'coupon-outline'
  | 'close'
  | 'pin'
  | 'arrow-drop-down'
  | 'arrow-drop-up'
  | 'qrcode'
  | 'phone-call'
  | 'copy'
  | 'chevron-thin'
  | 'enter'
  | 'download'
  | 'home-1'
  | 'reseration'
  | 'bag'
  | 'user'
  | 'location'
  | 'close-thin'
  | 'scan-1'
  | 'cart-thin'
  | 'mobile'
  | 'add'
  | 'location-fatter'
  | 'notice'
  | 'need-pay'
  | 'received'
  | 'wait-ship'
  | 'shipped'
  | 'refresh'
  | 'announcement'
  | 'call'
  | 'go'
  | 'exchange'
  | 'clear'
  | 'location-outline'
  | 'time'
  | 'code'
  | 'stared'
  | 'star'
  | 'didian'
  | 'couponCenter'
  | 'shareCoupon'
  | 'like'
  | 'dislike'
  | 'wechat-more'
  | 'star-full'
  | 'scan-bold'
  | 'clock'
  | 'picture'
  | 'tip'
  | 'top-arrow'
  | 'bottom-arrow'
  | 'loading'
  | 'edit'
  | 'add-solid'
  | 'youhuiquan'
  | 'caipin-'
  | 'order-completed'
  | 'finishedjob'
  | 'alarm'
  | 'xiaofeijilu'
  | 'lipinka'
  | 'xinyongka'
  | 'yiguoqi'
  | 'zhifubao'
  | 'member-level'
  | 'balance'
  | 'giftcard'
  | 'huiyuanziliao'
  | 'taskcenter'
  | 'tuangouhexiao'
  | 'gouwuche'
  | 'dingdanguanli'
  | 'saoyisao'
  | 'daizhifudingdan'
  | 'pluscircle'
  | 'minus-circle'
  | 'hongbao'
  | 'jilu'
  | 'jifen'
  | 'telephone'
  | 'locationb'
  | 'privacy'
  | 'fanhui-tst'
  | 'guanbi-tst'
  | 'yishiyong'
  | 'yishixiao'
  | 'card'
  | 'delivery'
  | 'success-fill'
  | 'error-fill'
  | 'clock-filling'
  | 'copy1'
  | 'a-rongqi465'
  | 'a-xingzhuangjiehe2'
  | 'a-xingzhuangjiehe3'
  | 'xingzhuangjiehe1'
  | 'chevron-up'
  | 'chevron-down'
  | 'chevron-left'
  | 'chevron-right'
  | 'info-circle'
  | '_search'
  | 'uncheck'
  | 'a-check-circle1'
  | 'cross'
  | 'chevron-small-right'
  | 'a-xingxing1'
  | 'takephoto'
  | 'up'
  | 'down1'
  | 'chevron-right1'
  | 'copyb'
  | 'telephone'
  | 'locationc'
  | 'back'
  | 'code2'
  | 'topping'
  | 'closeb'
  | 'peican1'
  | 'peican2'
  | 'peisong1'
  | 'peisong2'
  | 'wancheng1'
  | 'wancheng2'
  | 'xiadan1'
  | 'xiadan2'
  | 'chucan1'
  | 'chucan2'
  | 'alert'
  | 'urge'
  | 'gift'
  | 'guanbi'
  | 'question-circle'
  | 'plus-circle'
  | 'jiantou-youhua'
  | 'rongqi'
  | 'wepay'
  | 'card-balance'
  | 'balance'
  | 'closepop'
  | 'unselected1'
  | 'zfbpay'
  | 'issue'
  | 'excl'
  | 'rongqi1'
  | 'a-rongqi2'
  | 'a-rongqi3'
  | 'send-1'
  | 'closeIcon'

type Props = {
  value: IconValueType
  size?: number | string
  color?: string
  className?: string
  onClick?: (e?: any) => void
  style?: any
  info?: string | number
  infoStyle?: any
}
export default function Icon({
  value,
  color,
  size = 24,
  className,
  onClick,
  style,
  info,
  infoStyle,
}: Props) {
  let fontSize = addUnit(size)

  return (
    <View
      className={classNames(styles.container, 'center', className)}
      style={style}
    >
      <Text
        style={{
          color: color,
          fontSize,
        }}
        onClick={onClick}
        className={classNames(`iconfont icon${value}`)}
      />
      {info != null && (
        <View className={styles.info} style={infoStyle}>
          {info}
        </View>
      )}
    </View>
  )
}
